{include file="public/header,public/nav,public/fixbar" title="个人资料-<?php echo request()->pc_info['seo_title']?>"/}
<div class="layui-body">
    <div class="layui-container">
        <div class="layui-col-space15">
            <!-- 菜单栏 -->
            <div class="layui-col-xs12 layui-col-sm4 layui-col-md4 layui-col-lg3">
                <div class="layui-main user-main min-height-90vh">
                    {include file="user/menu"/}
                </div>
            </div>
            <div class="layui-col-xs12 layui-col-sm8 layui-col-md8 layui-col-lg9">
                <div class="layui-main user-main min-height-90vh">
                    <h2>个人资料</h2>
                    <div class="layui-row">
                        <div class="layui-upload-drag user-avatar layui-circle {if $info.is_member_level}avatar-wrapper{/if}" id="image_url">
                            <i class="layui-icon layui-icon-addition {$info.avatar} layui-hide {/if}"></i> 
                            <div class="upload-tip {$info.avatar} layui-hide {/if}">上传头像</div>
                            <div class="head-file-iteme" id="preview_page_image" {if $info.is_member_level}>
                                <div class="handle" style="display: none;"><i class="layui-icon layui-icon-upload-drag"></i></div>
                                <img src="{$info.avatar ?? ''}" alt="上传成功后渲染" class="layui-circle">
                            </div>
                        </div>
                        <div class="field">
                            <span class="field-label">用户ID：</span>
                            <div class="field-content">
                                <p class="field-tilte">{$info.id}</p>
                                <button class="layui-btn layui-btn-primary layui-btn-sm copy" data-id="{$info.id ?? ''}"><i class="iconfont icon-fuzhi" style="margin-right: 4px;"></i> 复制</button>
                            </div>
                        </div>
                        <div class="field">
                            <span class="field-label">用户昵称：</span>
                            <div class="field-content">
                                <p class="field-tilte">{$info.nickname_two ?? ''}</p>
                                <button class="layui-btn layui-btn-primary layui-btn-sm update-nickname" data-id="{$info.id ?? ''}"><i class="layui-icon layui-icon-edit"></i> 修改</button>
                            </div>
                        </div>
                        <div class="field">
                            <span class="field-label">实名认证：</span>
                            <div class="field-content">
                                <p class="field-tilte">{$info.base.real_name ?? '--'}，{$info.base.id_card ?? '--'}</p>
                                <button class="layui-btn layui-btn-primary layui-btn-sm update-realname" data-id="{$info.id ?? ''}"><i class="layui-icon layui-icon-edit"></i> 修改</button>
                            </div>
                        </div>
                        <div class="field">
                            <span class="field-label">绑定手机：</span>
                            <div class="field-content">
                                <p class="field-tilte">{$info.mobile ?? ''}</p>
                            </div>
                        </div>
                        <div class="field">
                            <span class="field-label">账号密码：</span>
                            <div class="field-content">
                                <p class="field-tilte">********</p>
                                <button class="layui-btn layui-btn-primary layui-btn-sm update-pass" data-id="{$info.id ?? ''}"><i class="layui-icon layui-icon-edit"></i> 修改</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/footer"/}
<script type="text/javascript">
    layui.use(['form','layer','laydate','upload'], function(){
        var layer = layui.layer, upload = layui.upload, form = layui.form, laydate = layui.laydate, $=layui.jquery;

        // 上传头像
        var uploadInst = upload.render({
            elem: '#image_url'
            ,url: '/upload/uploadImg' //改成您自己的上传接口
            ,accept: 'images' //图片
            ,acceptMime:'image/jpg, image/png, image/jpeg' // 筛选出的文件类型
            ,exts: 'jpg|png|jpeg' //允许上传的文件后缀
            ,size: 2048
            ,headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
            ,before: function(obj){
                layer.load();
            }
            ,done: function(res){
                //如果上传失败
                if(res.code == 1){
                    layer.closeAll('loading');
                    return layer.msg('上传失败：'+res.msg,{icon: 2});
                }
                //上传成功
                $('#preview_page_image').removeClass('layui-hide').find('img').attr('src', res.data);
                update_avatar(res.data);
            }
            ,error: function(){
                layer.closeAll('loading');
                layer.msg('上传失败', {icon: 2});
            }
        });

        $(document).on("mouseenter mouseleave", ".head-file-iteme", function(event){
            if(event.type === "mouseenter"){
                //鼠标悬浮
                $(this).children(".handle").show();
            }else if(event.type === "mouseleave") {
                //鼠标离开
                $(this).children(".handle").hide();
            }
        });

        // 修改头像
        function update_avatar(avatar){
            $.ajax({
                url:'/user/info',
                type:'post',
                data:{"avatar":avatar},
                dataType:"JSON",
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success:function(res){
                    layer.closeAll('loading');
                    if(res.code == 0){
                        layer.msg(res.msg,{icon: 1,time:1500},function(){
                            location.reload();
                        });
                    }else{
                        layer.msg(res.msg,{icon: 2});
                    }
                },
                error:function(e){
                    layer.closeAll('loading');
                    layer.msg('请求失败'+e.responseText,{icon: 2});
                },
            });
        }

        // 修改昵称
        $(".update-nickname").click(function(){
            var index = layer.open({
                skin: 'layui-layer-radius', // 弹窗主题样式
                offset: 'auto',
                title: '修改昵称',
                type: 2,
                anim: 'slideUp',
                shade: 0.3,
                shadeClose: true,
                area: ['420px', '280px'],
                content: '/user/update_nickname'
            });
            var device = layui.device('mobile');
            if (device.mobile) {
                layer.full(index);
            }
        })

        // 修改实名
        $(".update-realname").click(function(){
            var index = layer.open({
                skin: 'layui-layer-radius', // 弹窗主题样式
                offset: 'auto',
                title: '实名认证',
                type: 2,
                anim: 'slideUp',
                shade: 0.3,
                shadeClose: true,
                area: ['500px', '360px'],
                content: '/user/update_realname'
            });
            var device = layui.device('mobile');
            if (device.mobile) {
                layer.full(index);
            }
        })

        // 修改密码
        $(".update-pass").click(function(){
            var index = layer.open({
                skin: 'layui-layer-radius', // 弹窗主题样式
                offset: 'auto',
                title: '修改密码',
                type: 2,
                anim: 'slideUp',
                shade: 0.3,
                shadeClose: true,
                area: ['420px', '480px'],
                content: '/user/update_pass'
            });
            var device = layui.device('mobile');
            if (device.mobile) {
                layer.full(index);
            }
        })

        // 复制ID
        $(".copy").on('click',function(){
            var id = $(this).data('id');
            var $temp = $('<input>');
            $('body').append($temp);
            $temp.val(id).select();
            document.execCommand('copy');
            $temp.remove();
            layer.msg('复制成功',{icon: 1});
        });
    });

</script>